<template>
  <div id="recruitJob">
    <div class="recruitJobCon">
      <div class="worksDetailNavInfo">
        <!-- <div v-show="!id"><p @click="handleRecruiting()">就业信息</p><span>&gt;</span><p @click="handleRecruiting()">高端职位</p><span>&gt;</span><p>职位列表</p></div> -->
        <div v-show="!id"><p @click="handleRecruiting()">就业信息</p><span>&gt;</span><p>职位列表</p></div>
        <!-- <div v-show="id"><p @click="handleRecruiting()">就业信息</p><span>&gt;</span><p @click="handleRecruiting()">高端职位</p><span>&gt;</span><p @click="handleDetail()">职位详情</p><span>&gt;</span><p>职位列表</p></div> -->
        <div v-show="id"><p @click="handleRecruiting()">就业信息</p><span>&gt;</span><p @click="handleDetail()">职位详情</p><span>&gt;</span><p>职位列表</p></div>
      </div>
      <div class="newsListSearch">
        <div @click="handleOption(1)" class="options">高端职位 <span v-show="headerTabIndex == 1"></span></div>
        <div @click="handleOption(2)" class="options">最新实习 <span v-show="headerTabIndex == 2"></span></div>
        <label for="newsListSearchId" style="vertical-align: middle; margin-right: .2rem;">
          <img src="../../assets/img/home/news_search.png" alt="">
          <input id="newsListSearchId" type="text" placeholder="搜索" v-model="searchText" @keydown.enter="onPageChange(1)">
          <!-- <input id="newsListSearchId" type="text" placeholder="搜索" v-model="searchText" @keydown.enter="searchJob()"> -->
        </label>
        <div class="btnBox">
            <button class="btnDef" @click="onPageChange(1)">搜索</button>
        </div>
      </div>
      <div class="homeContentFlexRightBoxJobList">
        <ul>
          <li v-for="(item, index) in recruitJobData" :key="index" @click="jumpTo('/jobVacancy?highendJobId=' + item.id)">
            <h2>{{item.positionName}} <b>{{item.years}}</b></h2>
            <p>{{item.workAddress}} {{item.education}}</p>
            <div style="width: 100%; background: rgba(238, 238, 238, 1); height: 1px;"></div>
            <p>{{item.userName}}</p>
            <span>{{item.createTime}}</span>
            <img class="pitchon" src="../../assets/img/home/pitchon.png" alt="">
          </li>
        </ul>
      </div>
    </div>
    <page-number
      :pageTotal="pageTotals"
      @prevPage="onPrevPage($event)"
      @pageActive="onPageActive($event)"
      @nextPage="onNextPage($event)"
      @pageChange="onPageChange($event)"
    ></page-number>
  </div>
</template>

<script>
import pageNumber from '../../components/pageNumber/index.vue'
export default {
  name: 'recruitJob',
  components: {
    pageNumber
  },
  data () {
    return {
      pageTotals: 1,
      searchText: '',
      id: this.$route.query.id,
      userId: this.$store.state.user.userId,
      recruitJobData: [],
      headerTabIndex: 1
    }
  },
  created () {
    // this.fetchJobListByUserId()
    this.onPageChange(1)
  },
  methods: {
    // handleOption
    handleOption (i) {
      this.headerTabIndex = i
      this.onPageChange(1)
    },
    onPrevPage (val) {
    },
    onPageActive (val) {
    },
    onNextPage (val) {
    },
    onPageChange (val) {
      this.fetchJobListByUserId(val)
    },
    // 锚点跳转到职位详情
    handleDetail () {
      this.$router.go(-1)
    },
    // 锚点跳转到就业信息
    handleRecruiting () {
      this.$router.push('/recruiting')
    },
    // 根据企业id获取职位
    getPositionsByEntId () {
      this.$api.getPositionsByEntId({
        enterpriseId: 11
      }).then(res => {
        console.log(res)
      })
    },
    // 获取职位列表
    fetchJobListByUserId (val) {
      this.$api.getJobListByUserId({
        userId: this.userId,
        positionType: this.headerTabIndex,
        createId: this.id,
        positionName: this.searchText,
        pageNum: val
      }).then(res => {
        if (res.code === 0) {
          this.recruitJobData = res.data
          console.log(res)
          this.pageTotals = Math.ceil(res.total / 10)

        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
#recruitJob{
  .newsListSearch{
    background-color: #fff;
    padding: .2rem;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    /deep/ .userSelect{
      font-size: 0;
    }
    .options{
      width: 100px;
      position: relative;
      span{
        display: inline-block;
        width: 90%;
        height: .035rem;
        background-color: #15a29c;
        position: absolute;
        left: 34%;
        transform: translateX(-50%);
        bottom: -8px;
      }
    }
    label{
      display: inline-block;
      width: 2rem;
      height: .4rem;
      border: 1px solid #ddd;
      border-radius: .05rem;
      position: relative;
      img{
        width: .2rem;
        height: .2rem;
        display: inline-block;
        position: absolute;
        left: .1rem;
        top: 50%;
        transform: translateY(-50%);
      }
      input{
        display: inline-block;
        width: 100%;
        height: 100%;
        padding-left: .4rem;
        border-radius: .05rem;
        font-size: .14rem;
        font-weight: 500;
        color: #333;
        line-height: .22rem;
      }
    }
    .btnBox{
      width: 80px;
      vertical-align: top;
    }
  }
  .recruitJobCon{
    width: 1200px;
    margin: auto;
    padding: .5rem 0;
    .homeContentFlexRightBoxJobList{
      ul{
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
        li:nth-child(5n) {
          margin-right: 0;
        }
        li{
          padding: .15rem .2rem;
          position: relative;
          box-shadow: 0 0 5px #eee;
          margin-bottom: .15rem;
          background-color: #fff;
          width: 2.2rem;
          margin-right: .25rem;
          h2{
            font-size: 0.18rem;
            line-height: 0.26rem;
            font-weight: bold;
            color: #333333;
            b{
              font-size: 0.18rem;
              line-height: 0.26rem;
              font-weight: bold;
              color: #ff4145;
              float: right;
            }
          }
          P{
            font-size: 0.14rem;
            color: #666666;
            padding: .05rem 0;
          }
          span{
            font-size: 0.12rem;
            color: #999;
          }
          img.pitchon{
            position: absolute;
            left: 0;
            top: 0;
            background-color: rgba(0,0,0,0);
          }
        }
      }
    }
  }
}
</style>
